<template>
<el-dialog class="data-dialog" :append-to-body="true" :visible.sync="dialogData.show" width="1100px" :close-on-click-modal="false">
    <template slot="title">
        <span class="el-dialog__title" style="margin-right:16px;">{{dialogData.title}}</span>
        <el-button type="text" @click="copyLink(true)" icon="el-icon-document-copy">复制路径</el-button>
        <el-button type="text" @click="copyLink(false)" icon="el-icon-document-copy">复制表结构</el-button>
        <el-button type="text" @click="handleDown" icon="el-icon-download">下载</el-button>
    </template>
    <detail-con :detail="dialogData.data"></detail-con>
    <span slot="footer" class="dialog-footer"></span>
</el-dialog>
</template>

<script>
import DetailCon from './detail'
import { mapGetters } from 'vuex'
export default {
    name: 'DataDetail',
    props: {
        dialogData: {
            type: Object
        }
    },
    computed: {
        ...mapGetters({
            projectId: 'common/getProjectId'
        })
    },
    components: {
        DetailCon
    },
    methods: {
        handleDown () {
            const params = {
                projectId: this.projectId,
                limit: 100,
                filePath: this.dialogData.data.table.dataFile
            }
            this.$download('/dataSource/downloadFile', params).then(res => {
                if (res) {
                    this.$message.success('下载成功')
                }
            })
        },
        copyLink (flag) {
            let input = document.createElement('input')
            const { table: { dataFile }, dataSet: { type, header } } = this.dialogData.data
            input.value = flag ? dataFile : JSON.stringify({ header, type })
            if (input.value === '') {
                this.$message.error('暂无数据')
                return false
            }
            document.body.appendChild(input)
            input.select()
            document.execCommand('Copy')
            document.body.removeChild(input)
            this.$message.success('复制成功')
        }
    }
}
</script>

<style lang="less">
.data-dialog {
    .el-dialog__header {
        .el-button {
            padding: 8px 10px;
        }
        .el-button:hover {
            border-radius: 0;
            background: #f5f5f5;
            padding: 8px 10px;
        }
    }
}
</style>
